<template>
    <div class="branding-layout">

        <!-- 初始化加载中 -->
        <UxIniting v-if="!inited" />

        <!-- 编辑 -->
        <BrandingNecklabelManage ref="manage" v-else-if="detail" :detail="detail" @update="getData()" @close="detailClose()" />

        <!-- 空数据 -->
        <div class="branding-nodata" v-else-if="inited && table.length == 0">

            <div class="branding-nodata-banner">
                <img src="https://img.podpartner.com/static/images-20230202/brand/necklabel-icon.png">
                <h2>Make Your Brand Stand Out with <br> Custom Neck Labels</h2>
                <button type="primary" @click="detailOpen()">Create neck label</button>
            </div>

            <div class="branding-nodata-bring">
                <h2>What can a custom neck label bring you?</h2>
                <ul>
                    <li>
                        <figure><img style="width:100px;height:36px;" src="https://img.podpartner.com/static/images-20230202/branding-bring-1.png"></figure>
                        <p>A creative neck label will leave a lasting impression on your customers and helps increase your brand awareness.</p>
                    </li>
                    <li>
                        <figure><img style="width:68px;height:58px;" src="https://img.podpartner.com/static/images-20230202/branding-bring-2.png"></figure>
                        <p>It offers you a chance to restate your brand values and make them resonate with your customers.</p>
                    </li>
                    <li>
                        <figure><img style="width:82px;height:50px;" src="https://img.podpartner.com/static/images-20230202/branding-bring-3.png"></figure>
                        <p>The subtle details on a neck label convey your pursuit of quality and make your brand more professional.</p>
                    </li>
                </ul>

            </div>

            <div class="branding-nodata-freedom">
                <h2>Want More Freedom to Design Your Neck Label?</h2>
                <h3>This feature allows you to unleash your creativity</h3>
                <figure><img src="https://img.podpartner.com/static/images-20230202/branding-freedom.png"></figure>
                <p>You are free to decide how to arrange all the elements and impress your customers with delicate details.</p>

                <button type="primary" @click="detailOpen()">Create neck label</button>
            </div>

        </div>

        <!-- 列表 -->
        <div class="branding-list" v-else>

            <!-- 贴顶导航 -->
            <UserFixedHead title="Branded neck label" />

            <div class="branding-list-title">
                <strong>Branded neck label</strong>
                <span>
                    <button type="primary" disabled v-if="table.length >= 10">Template limit reached</button>
                    <button type="primary" v-else @click="detailOpen()">Create neck label</button>
                </span>
            </div>

            <div class="branding-list-warp">

                <h3>Branded neck label list</h3>
                <ul>
                    <li v-for="item in table" :key="item.id">
                        <h4>
                            <strong v-text="item.title"></strong>
                            <em v-show="item.state == 1">Draft</em>
                        </h4>
                        <figure @click="item.dark && doPreview(item,0)" :empty="!item.dark">
                            <strong>
                                <img v-if="item.dark" crossOrigin="anonymous" v-lazy="$getLitimgUrl(item.dark.output_img,'medium')">
                                <img v-else src="https://img.podpartner.com/static/images-20230202/branding-placeholder.png">
                            </strong>
                            <span>Neck label for dark-colored clothes</span>
                        </figure>
                        <figure @click="item.light && doPreview(item,1)" :empty="!item.light">
                            <strong>
                                <img v-if="item.light" crossOrigin="anonymous" v-lazy="$getLitimgUrl(item.light.output_img,'medium')">
                                <img v-else src="https://img.podpartner.com/static/images-20230202/branding-placeholder.png">
                            </strong>
                            <span>Neck label for light-colored clothes</span>
                        </figure>
                        <h6>
                            <button @click="detailOpen(item)">Edit</button>
                            <button @click="removeBrand(item)" v-show="item.state == 1">Delete</button>
                        </h6>

                    </li>
                </ul>

            </div>

            <!-- 有内容 -->
            <UxLoading2 v-show="loading" />

        </div>

        <!-- 编辑对话框 -->
        <UxDialog :visible="!!dialog_edit" class="dialog-edit" @close="dialog_edit = null">
            <figure><img src="https://img.podpartner.com/static/images-20230202/branding-edit.png" alt=""></figure>
            <p>
                <strong>Are you sure you want to modify this neck label?</strong>
                <span>Once you confirm the modification, all the product templates using the previous neck label design will be updated.</span>
            </p>
            <fieldset>
                <button type="primary" @click="dialog_edit()">Confirm</button>
            </fieldset>
        </UxDialog>

        <!-- 删除 -->
        <UxDialog :visible="!!dialog_remove" class="dialog-remove" @close="dialog_remove = null">
            <figure><img src="https://img.podpartner.com/static/images-20230202/branding-remove.png" alt=""></figure>
            <p>
                <strong>Are you sure you want to delete this neck label?</strong>
                <span>Once deleted, it cannot be restored.</span>
            </p>
            <fieldset>
                <button type="primary" @click="dialog_remove = null">Cancel</button>
                <button @click="dialog_remove()">Sure</button>
            </fieldset>
        </UxDialog>

        <!-- 离开对话框 -->
        <UxDialog class="dialog-leave" :visible="!!dialog_leave" @close="dialog_leave && dialog_leave(false)">
            <!-- title="Do you want to leave?" -->
            <figure><img src="https://img.podpartner.com/static/images-20230202/brand/necklabel-icon.png" alt=""></figure>
            <p>
                <strong>Are you sure you want to leave the current page?</strong>
                <span>Once you leave, the changes you made may not be saved.</span>
            </p>
            <fieldset>
                <button @click="dialog_leave && dialog_leave(true)">Leave</button>
                <button @click="dialog_leave && dialog_leave(false)" type="primary">Stay</button>
            </fieldset>
        </UxDialog>

        <!-- 大图预览 -->
        <UxImagePreview v-model="preview" />

    </div>
</template>
<script>
import DesignResource from "@/utils/DesignResource.js";
export default {
    name: "UserBranding",
    layout: "layout-user",
    data () {
        return {
            inited: false,
            loading: true,
            detail: null,

            dialog_edit: null,
            dialog_remove: null,
            dialog_leave: null,

            form: { num: 1, size: 10, total: 0 },
            table: [],
            preview: null,
        };
    },
    methods: {

        // 获取数据
        async getData () {
            this.loading = true;
            let response = await this.$http("BrandLabel.search", {});
            if (response.code === 0) {
                const table = response.data || [];

                table.map(item => {
                    item.dark = item.dark_design ? JSON.parse(item.dark_design) : null;
                    item.light = item.light_design ? JSON.parse(item.light_design) : null;

                    if (item.dark) {
                        const isString = Object.prototype.toString.call(item.dark.layers) == "[object String]";
                        item.dark.layers = isString ? JSON.parse(item.dark.layers) : item.dark.layers;
                    }

                    if (item.light) {
                        const isString = Object.prototype.toString.call(item.light.layers) == "[object String]";
                        item.light.layers = isString ? JSON.parse(item.light.layers) : item.light.layers;
                    }
                })
                this.table = table;
                this.inited = true;
                this.loading = false;

                // 跳转
            } else {
                this.inited = true;
                this.loading = false;
                this.$uxMessage.error(response.msg || "error");
                // 提示
            }
        },

        // 删除
        removeBrand (item) {

            this.dialog_remove = () => {

                this.dialog_remove = null;
                this.loading = true;
                this.$http("BrandLabel.remove/" + item.id).then(response => {
                    if (response.code === 0) {
                        this.$uxMessage.success('Successfully deleted')
                        this.getData();
                    } else {
                        this.loading = false;
                        this.$uxMessage.error('Delete failed, please try again!')
                    }
                })
            }

        },

        // 打开详情
        detailOpen (detail) {
            if (!detail) {
                this.detail = {
                    title: '',
                    dark: null,
                    light: null,
                }
                document && (document.documentElement.scrollTop = 0);
            } else if (detail.state == 2) {
                // 正常的
                this.dialog_edit = () => {
                    this.dialog_edit = null;
                    this.detail = {
                        id: detail.id,
                        title: detail.title,
                        dark: detail.dark,
                        light: detail.light,
                    }
                    document && (document.documentElement.scrollTop = 0);
                }
            } else {
                // 草稿状态
                this.detail = {
                    id: detail.id,
                    title: detail.title,
                    dark: detail.dark,
                    light: detail.light,
                }
                document && (document.documentElement.scrollTop = 0);
            }
        },


        detailClose () {
            if (this.canLeave()) {
                this.detail = null;
                this.$nextTick(e => document.documentElement.scrollTop = 0)
            } else {
                this.dialog_leave = (leave) => {
                    if (leave) {
                        this.detail = null;
                        this.dialog_leave = null;
                        this.$nextTick(e => document.documentElement.scrollTop = 0)
                    } else {
                        this.dialog_leave = null;
                    }

                }
            }
        },


        doPreview (item, index) {
            const images = [];
            item.dark && item.dark.output_img && images.push(this.$getLitimgUrl(item.dark.output_img, 'preview'));
            item.light && item.light.output_img && images.push(this.$getLitimgUrl(item.light.output_img, 'preview'));
            index = Math.min(images.length - 1, index);

            if (images.length > 0) {
                this.preview = {
                    index: index,
                    images: images,
                }
            }
        },

        // 是否可离开
        canLeave () {
            if (this.$refs.manage && this.$refs.manage.change) {
                return false;
            } else {
                return true;
            }
        },


        // 分页数据改变
        changePage: function (type, value) {
            this.form.num = value;
            this.getData();
        },
    },
    created () {
        if (process.client) {
            this.getData()
            // 加载字体
            DesignResource.loadAllFont();
            this.$on('global:beforeLogout', () => new Promise((res, rej) => {
                if (this.canLeave()) {
                    res(true)
                } else {
                    this.dialog_leave = (leave) => {
                        if (leave) {
                            this.dialog_leave = null;
                            window.onbeforeunload = null;
                            setTimeout(() => res(true), 10)
                        } else {
                            this.dialog_leave = null;
                            setTimeout(() => res(false), 10)
                        }
                    }
                }
            }))

            window.onbeforeunload = (event) => {
                let notify = "Changes that you made may not be saved.";
                if (this.canLeave()) {
                } else {
                    (event || window.event).returnValue = notify;
                    return notify;
                }
            };
        }
    },

    // 路由离开
    beforeRouteLeave (to, from, next) {
        if (this.canLeave()) {
            window.onbeforeunload = null;
            next();
        } else {
            next(false);
            this.dialog_leave = (leave) => {
                if (leave) {
                    this.dialog_leave = null;
                    window.onbeforeunload = null;
                    next()
                } else {
                    this.dialog_leave = null;
                }
            }

        }
    },

};
</script>
<style lang="scss" scoped>
.branding-layout {
    position: relative;
    display: flex;
    flex-direction: column;

    & > .initing {
        flex: 1;
        width: 100%;
    }
}

.branding-init {
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: 8px;
    display: flex;
    z-index: initial;

    p {
        width: 100%;
        position: relative;
    }
}

.branding-nodata {
    flex: 1;
    position: relative;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 60px 150px;

    .branding-nodata-banner {
        padding: 36px 50px 43px;
        background: #f0eee6;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
            width: 80px;
            height: 80px;
        }

        h2 {
            margin-top: 12px;
            font-size: 32px;
            color: #000000;
            line-height: 40px;
            text-align: center;
        }
        button {
            width: 172px;
            margin-top: 28px;
        }
    }

    .branding-nodata-bring {
        margin-top: 120px;
        h2 {
            font-size: 24px;
            color: #000000;
            line-height: 24px;
            text-align: center;
        }
        ul {
            display: flex;
            margin: 46px -11px 0;
        }
        li {
            flex: 1;
            margin: 0 11px;
            background: #ffffff;
            border-radius: 6px;
            border: 1px solid #ebebeb;
            display: flex;
            flex-direction: column;
            figure {
                height: 120px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            p {
                flex: 1;
                background: #f6f6f6;
                border-radius: 0px 0px 6px 6px;
                padding: 16px 10px 16px 16px;
                box-sizing: border-box;
                font-size: 14px;
                color: #000000;
                line-height: 22px;
            }
        }
    }

    .branding-nodata-freedom {
        margin-top: 120px;
        text-align: center;
        h2 {
            font-size: 24px;
            color: #000000;
            line-height: 24px;
        }
        h3 {
            margin-top: 18px;
            font-size: 16px;
            font-weight: normal;
            color: #555555;
            line-height: 22px;
        }

        figure {
            margin-top: 40px;
            padding-bottom: 36.42%;
            position: relative;
            img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }

        p {
            font-size: 14px;
            color: #000000;
            line-height: 22px;
            margin-top: 40px;
        }

        button {
            width: 260px;
            height: 40px;
            font-size: 14px;
            margin-top: 48px;
        }
    }
}

.branding-list {
    flex: 1;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;

    & > .loading {
        position: fixed;
        left: 228px;
        top: 0;
        bottom: 0;
        right: 0;
    }

    .branding-list-title {
        display: flex;
        height: 72px;
        strong {
            flex: 1;
            background: #fff;
            border-radius: 8px;
            font-size: 32px;
            color: #000000;
            text-align: center;
            line-height: 72px;
        }
        span {
            margin-left: 20px;
            width: 224px;
            height: 40px;
            padding: 16px;
            background: #fff;
            border-radius: 8px;

            button {
                width: 100%;
            }
        }
    }

    .branding-list-warp {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        padding: 0 60px 90px;
        margin-top: 20px;
        position: relative;

        h3 {
            padding: 24px 0 12px;
            height: 24px;
            font-size: 18px;
            font-weight: normal;
            color: #000000;
            line-height: 24px;
        }

        ul {
            border-top: 1px solid #dcdcdc;
        }

        li {
            border-bottom: 1px solid #dcdcdc;
            display: flex;
            padding: 20px 0;
            h4 {
                width: 30.6%;
                font-size: 14px;
                color: #000000;
                line-height: 18px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                em {
                    margin-top: 12px;
                    width: 60px;
                    height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #edb002;
                    line-height: 20px;
                    background: #f6f6f6;
                    border-radius: 3px;
                    font-weight: normal;
                }
            }
            figure {
                width: 26.5%;
                text-align: center;
                box-sizing: border-box;
                strong {
                    display: block;
                    margin: 0 auto;
                    width: 160px;
                    height: 160px;
                    background: #000;
                    padding: 12px;
                    border: 1px solid #000;
                    border-radius: 4px;
                    box-sizing: border-box;

                    cursor: pointer;
                    img {
                        width: 100%;
                        height: 100%;
                        border: 1px dashed #686666;
                    }
                }
                span {
                    display: block;
                    margin: 8px auto 0;
                    max-width: 160px;
                    font-size: 14px;
                    color: #000000;
                    line-height: 16px;
                }

                & + figure strong {
                    background: #fff;
                    border-color: #dcdcdc;

                    img {
                        border-color: #bdbdbd;
                    }
                }

                // &[empty] strong img {
                //     border: 1px dashed #bdbdbd;
                // }
            }

            h6 {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1;

                button {
                    width: 120px;
                    height: 32px;
                    font-size: 14px;
                    font-weight: normal;

                    & + button {
                        margin-top: 16px;
                    }
                }
            }
        }
    }
}

.dialog-remove,
.dialog-leave,
.dialog-edit {
    &::v-deep .dialog-content {
        .dialog-body {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 40px 20px 26px;
            width: 320px;
            height: 414px;
            box-sizing: border-box;
        }

        figure {
            margin-top: 20px;
            width: 80px;
            height: 80px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        p {
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
            text-align: center;
            strong {
                color: #000000;
                margin-bottom: 8px;
            }
            span {
                color: #555555;
                line-height: 22px;
            }
        }

        fieldset {
            display: flex;
            flex-direction: column;
            width: 100%;
            button + button {
                margin-top: 8px;
            }
        }
    }
}

.dialog-edit::v-deep .dialog-content .dialog-body {
    figure {
        margin-top: 13px;
    }

    p {
        strong {
            font-size: 14px;
            color: #000000;
            line-height: 20px;
        }
        span {
            font-size: 14px;
        }
    }
}
.dialog-leave::v-deep .dialog-content .dialog-body figure {
    margin-top: 0;
    width: 60px;
    height: 60px;
}
</style>
